<template>
  <div ref="chartRef" class="ui-mode-chart"></div>
</template>
<script>
  import { defineComponent, ref, onMounted, nextTick, watch } from 'vue'
  import cloneDeep from 'lodash/cloneDeep'
  import * as echarts from 'echarts'
  export default defineComponent({
    name: 'Mod2',
    components: {},
    props: {
      color: {
        type: String,
        default: '',
      },
      title: {
        type: String,
        default: '',
      },
      data: {
        type: Array,
        default: [],
      },
      xData: {
        type: Array,
        default: [],
      },
    },
    setup(props) {
      const chartRef = ref()

      const initChart = () => {
        console.log('props.xData', props.xData)
        let myChart = echarts.init(chartRef.value)
        let option = {
          // backgroundColor: '#fff',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow',
              // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          grid: {
            left: '1%',
            right: '4%',
            bottom: '15%',
            top: '13%',
            containLabel: false,
          },
          xAxis: {
            show: false,
            type: 'category',
            data: props.xData,
          },
          yAxis: {
            show: false,
            type: 'value',
            axisLine: {
              lineStyle: {
                color: 'black',
              },
            },
            axisLabel: {},
          },
          series: [
            {
              name: props.title,
              type: 'bar',
              barWidth: '30%',
              itemStyle: {
                normal: {
                  color: props.color,
                  barBorderRadius: 8,
                  label: {
                    show: false,
                  },
                },
              },
              data: props.data,
            },
          ],
        }

        option && myChart.setOption(cloneDeep(option), true)
      }
      onMounted(() => {
        nextTick(() => {
          initChart()
        })
      })
      watch(
        () => [props.data],
        () => {
          initChart()
        },
        { deep: true }
      )
      return { chartRef }
    },
  })
</script>

<style lang="scss">
  .ui-mode-chart {
    width: 100%;
    height: 80px;
  }
</style>
